<template>
    <div class="update-avatar-container">
        <img :src="image" alt="">
        <van-nav-bar
            class="navbar"
            left-text="取消"
            right-text="完成"
            @click-left="$emit('close')"
            @click-right="onConfirm"
        />
    </div>
</template>

<script>
import { editUserAvatar } from '@/api/user'
    export default {
        name: 'updateAvatar',
        props:{
            file:{
                // type: String,
                required: true
            }
        },
        data() {
            return {
                image: window.URL.createObjectURL(this.file)
            }
        },
        methods: {
            async onConfirm(){
                this.$toast.loading({
                    message: '保存中...',
                    forbidclick: true //禁止点击背景
                })
                // multipart/form-data ，需要进行以下操作
                // 1. const fd = new FormData();
                // 2. fd.append('photo',this.file)

                const fd = new FormData();
                fd.append('photo',this.file)

                // 数据请求
                await editUserAvatar(fd)

                // 更新父组件的视图
                this.$emit('update-avatar',this.image)
                // 关闭弹框
                this.$emit('close')
                // 提示
                 this.$toast.success('修改成功')
            }
        },
    }
</script>

<style lang="less" scoped>
.navbar{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
}
</style>